<script setup>
import { reactive, onMounted, ref } from "vue";

import { Swiper, SwiperSlide } from 'swiper/vue';

import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';


let modules = [Autoplay, Navigation, Pagination, Scrollbar, A11y];

const imgs = ref([
    { pic: new URL('@/assets/lunbo/1.jpg', import.meta.url).href },
    { pic: new URL('@/assets/lunbo/2.jpg', import.meta.url).href },
    { pic: new URL('@/assets/lunbo/3.jpg', import.meta.url).href },
    { pic: new URL('@/assets/lunbo/4.jpg', import.meta.url).href },
    { pic: new URL('@/assets/lunbo/5.jpg', import.meta.url).href }
])


</script>

<template>
    <div id="app">
        <div class="header-image">
            <div class="glass-box">
                <h1 style="color: #fff;font-size: 28px;">机动都市阿尔法</h1>
                <p style="font-weight: 800;font-size: 20px;">——爱机甲 打机动——</p>
            </div>
        </div>
        <div class="main-content">
            <div class="game-intro">
                <h2>游戏介绍</h2>
                <p>《机动都市阿尔法》是一款由网易游戏开发的机甲射击游戏，于2021年1月21日公测。
                    游戏中玩家将扮演不同的角色，使用武器，操纵机甲，与各方选手一起进行对决。
                </p>
                <h2>背景设定</h2>
                <p>在近未来的机动都市，一场神秘大赛凭空出世。玩家将操纵机甲，和代表着各方势力的选手一起，登上全球瞩目的舞台，为了争夺冠军的荣誉而战。
                    在这里，除了射击和团队协作之外，玩家还需要学会驾驭各类新奇武器和华丽的机甲载具，并通过高超的作战策略和敏捷的操作，来对抗强大的机甲与对手。
                </p>
                <h2>游戏测评</h2>
                <p>机甲对战是《机动都市阿尔法》的卖点，并且游戏在世界观和人物角色的塑造上也同样用心，每一个驾驶员都鲜活生动，他们背后的故事也支撑起了这个游戏世界。（18183网评）
                </p>
                <p>该作有着不同的游戏模式可供玩家体验，其中既有像团队竞技这样的传统竞技型游戏模式，也有小队狙击战这样更具娱乐性的休闲模式，无论玩家是想要沉浸式的战局体验，还是娱乐性质的快速对决，游戏都能满足到玩家的需求。（3DM网评）
                </p>
            </div>
            <div class="icon-links">
                <h2>快速链接</h2>
                <div class="icons">
                    <a href="https://weibo.com/u/6940968600?is_all=1" target="_blank"><img style="margin: 20px;"
                            src="@/assets/jump/weibo.png"></a>
                    <a href="https://tieba.baidu.com/f?fr=frsshare&kw=%E6%9C%BA%E5%8A%A8%E9%83%BD%E5%B8%82%E9%98%BF%E5%B0%94%E6%B3%95"
                        target="_blank"><img style="margin: 20px;" src="@/assets/jump/tieba.png"></a>
                    <a href="https://space.bilibili.com/419641453/" target="_blank"><img style="margin: 20px;"
                            src="@/assets/jump/bili.png"></a>
                </div>
            </div>
        </div>
        <div class="carousel">
            <h2>游戏特色</h2>
            <swiper
                :modules="modules"
                :space-between="50" loop="true"      
                :pagination="{ enabled: true, type: 'bullets', clickable: true }"
                :autoplay="{ delay: 2000}"
                :navigation="true" 
            >
                <swiper-slide v-for="(item, index) in imgs">
                    <img :src="item.pic">
                </swiper-slide>

            </swiper>



        </div>
    </div>
</template>



<style scoped>
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
}

* {
    box-sizing: border-box;
}

#app {
    text-align: center;
    color: #2c3e50;
}

.header-image {
    background-image: url('../../assets/image1.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;
    position: relative;

}

.glass-box {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.3);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    text-align: center;
}

.main-content {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.game-intro,
.icon-links {
    width: 45%;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icons {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

}

.icons a {
    text-decoration: none;
    color: inherit;
}

.carousel {
    margin-top: 20px;
}

.carousel-content {
    display: flex;
    overflow-x: scroll;
}

.slide {
    min-width: 300px;
    height: 200px;
    background: #ccc;
    margin-right: 10px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 1000px;
  height: auto;
  display: block;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff;
}
</style>